import { useState } from 'react'
import { Avatar, Badge, Button, Card, Divider, List, Space } from 'antd-mobile'
import reactLogo from '@/assets/react.svg'
import { MessageOutline, SystemQRcodeOutline } from 'antd-mobile-icons'
import './style.less'

function Header() {
  const [count, setCount] = useState(0)

  return (
    <div className='header'>
      <List style={{backgroundColor: 'transparent'}}>
        <List.Item
          prefix={<Avatar src="https://files.codelife.cc/icons/doubao.com.webp" fit='fill' />}
          description={
            <Space block style={{color: '#fff'}}>
              <span>普通外科</span>
              <Divider direction='vertical' />
              <span>主任医师</span>
            </Space>
          }
        >
          马思溪
        </List.Item>
      </List>
      <div style={{marginRight: 18}}>
        <Space>
          <SystemQRcodeOutline fontSize={25}/>
          <Badge content={99}>
          <MessageOutline fontSize={25}/>
          </Badge>
        </Space>
      </div>
    </div>
  )
}

export default Header
